<template>
  <div>
    <!-- 头部 -->
    <MyHead :title="'购物车'" :show="true"></MyHead>
    <!-- 渲染页面,判断是否存在数据 -->
    <div class="shoppingcars" v-if="list.length > 0 ? flag : !flag">
      <div v-for="(l, i) in list" :key="i">
        <van-swipe-cell>
          <div class="checks">
            <van-checkbox v-model="l.check"></van-checkbox>
          </div>
          <van-card
            :price="Math.floor(l.money / 100).toFixed(2)"
            :title="l.title"
            class="goods-card"
            :num="l.num"
            :thumb="'https://img1.yiwugou.com/' + l.img"
          >
            <template #footer>
              <van-stepper
                v-model="l.num"
                theme="round"
                button-size="22"
                disable-input
              />
            </template>
          </van-card>

          <template #right>
            <van-button
              right-height="100%"
              square
              text="删除"
              type="danger"
              class="delete-button"
              @click="ondelete(l)"
            />
          </template>
        </van-swipe-cell>
      </div>
    </div>
    <!-- 没有查询到数据显示为空 -->
    <div v-else>
      <van-empty description="购物车为空">
        <van-button round type="danger" class="bottom-button" @click="gohome"
          >前往商城购物</van-button
        >
      </van-empty>
    </div>

    <!-- 结算 -->
    <div class="settlement">
      <van-submit-bar :price="amount" button-text="提交订单">
        <van-checkbox id="checkall" v-model="quan">全选</van-checkbox>
      </van-submit-bar>
    </div>
  </div>
</template>


<script>
import axios from "axios";
export default {
  data() {
    return {
      list: [],
      flag: true,
      check: false,
      total: 0,
      checkTotal: 0,
      amount: 0,
      checkAmount: 0,
    };
  },
  watch: {
    // 浅度监听
    // goods(v){
    //     console.log(v)
    // }
    // 深度监听
    list: {
      deep: true,
      handler(v) {
        this.total = 0;
        this.checkTotal = 0;
        this.amount = 0;
        this.checkAmount = 0;
        v.forEach((item) => {
          if (item.check) {
            this.total += item.num;
            this.amount += item.num * item.money;
          }
        });
      },
    },
  },
  mounted() {
    if(!this.appphone){
            this.$router.push({name:'login'})
        }
    if(this.appphone){
      axios
      .get("http://localhost:3000/shoppingcar", {
        params: {
          phone: this.appphone,
        },
      })
      .then((res) => {
        console.log(res);
        this.list = res.data;
        console.log(res.data.length);
      });
    }
    this.list.forEach((item) => {
      if (item.check) {
        this.total += item.num;
        this.amount += item.num * item.money;
      }
    });
   
  },
  methods: {
    gohome() {
      this.$router.push({ name: "home" });
    },
    ondelete(l) {
      axios.delete("http://localhost:3000/shoppingcar/" + l.id).then((res) => {
        this.list.splice(l, 1);
        console.log(res);
      });
    },
  },
  computed: {
    quan: {
      get() {
        var flag = true;
        if (this.list.length > 0) {
          this.list.forEach((item) => {
            if (!item.check) {
              flag = false;
            }
          });
        } else {
          flag = false;
        }
        return flag;
      },
      set(v) {
        this.list = this.list.map((item) => {
          return { ...item, check: v };
        });
      },
    },
  },
};
</script>

<style lang="scss" scoped>
.van-swipe-cell {
  position: relative;
  .checks {
    position: absolute;
    left: 18px;
    top: 50px;
    color: #000;
    z-index: 777;
  }
}
.shoppingcars{
  height:100%;
  overflow: auto;
  padding-bottom: 100px;
}
.van-submit-bar {
  bottom: 45px;
}
.bottom-button {
  width: 160px;
  height: 40px;
}
.delete-button {
  height: 100%;
}
.van-card {
  margin: 10px;
}
.van-card__thumb {
  margin-left: 20px;
}
</style>